
<template>
  <main>
    <!-- <TheWelcome /> -->
    <!-- <p>{{ a }}</p>
    <p><button @click="a++">a++</button></p>
    <CompA v-model:a="a" b="2" c="3">
        1111111
    </CompA> -->

    <!-- 
      封装组件 Applink
      1. 可以实现路由跳转 / url远程地址跳转(在线地址)
      2. active-class/ inactive-class


     -->


    <app-link to="/" active-class="active" inactive-class="link">首页</app-link>
    <app-link to="/about" active-class="active" inactive-class="link">首页</app-link>
    <app-link to="https://www.baidu.com">百度</app-link>

    <NavLink :list="[{label:'首页',to:'/'},{label:'关于',to:'/about'},{label:'百度',to:'https://www.baidu.com'}]"></NavLink>
  </main>
</template>


<script setup>
/* 
  1. 每个 *.vue 文件最多可以包含一个 <script setup>。(不包括一般的 <script>)

  2. 这个脚本块将被预处理为组件的 setup() 函数，这意味着它将为每一个组件实例都执行。<script setup> 中的顶层绑定都将自动暴露给模板

  3. 脚本中外层生命的变量 会作为 setup函数的返回值 (顶层的绑定会被暴露给模板)

  4. 引入的.vue文件 会对应变量名自动注册为当前页面(组件)的子组件

*/

// import TheWelcome from '../components/TheWelcome.vue'

// 组件内路由守卫 => 组合式
// import { onBeforeRouteLeave,onBeforeRouteUpdate } from "vue-router";

// 组件内获取 路由实例和当前路由信息 
// 1. 通过组件实例获取
// 2. 官方提供了 useRouter useRoute  => 用于获取路由实例和当前路由信息

// import { getCurrentInstance } from "vue";
import { ref } from "vue";
import {useRouter,useRoute} from "vue-router"
// import CompA from "../components/CompA.vue";
import AppLink from "../components/AppLink.vue";
import NavLink from "../components/NavLink.vue";
let a = ref(10);


// var app = getCurrentInstance();
// console.log(app.appContext.config.globalProperties.$router);
// console.log(app.appContext.config.globalProperties.$route);

let router = useRouter();
let route = useRoute();
console.log("router",router);
console.log("route",route);




// onBeforeRouteLeave((to, from) => {
//   console.log("from", from);
//   console.log("to", to);
//   // return true;  // next();

//   // if (to.path == "/about") {
//   //   return false;  //  next(false);
//   // }
//   // return true;

//   if (to.path == "/about" ) {
//       // return "/404";  // next("/404")
//       return {path:"/404",query:{a:1,b:2}};  // next("/404")
//   }

//   return true; // next()

// })

</script>
